/*
 * @Description: 
 * @Version: 0.0.0
 * @Autor: 源
 * @Date: 2022-10-08 09:13:02
 * @LastEditors: 源
 * @LastEditTime: 2022-11-01 09:52:34
 * @FilePath: \pnpm-v3-ts-ui\play\vite.config.ts
 */
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 支持 html 配置
import { createHtmlPlugin } from 'vite-plugin-html'
//svg
import {createSvgIconsPlugin} from "vite-plugin-svg-icons"

// defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const name='laomi'
  const root = process.cwd()
  const env = loadEnv(mode, root) // 环境变量对象
  const port = Number(process.env.npm_config_port) || 9527
  const isServe = command === 'serve'
  // command === 'build' command === 'serve'
  return {
    root, //项目根目录（index.html 文件所在的位置） 默认： process.cwd()
    base:  isServe ? './' : '', //  开发或生产环境服务的公共基础路径：默认'/'   1、绝对 URL 路径名： /foo/；  2、完整的 URL： https://foo.com/； 3、空字符串或 ./（用于开发环境）
    // ******插件配置******
    plugins: [
      vue(),
      createHtmlPlugin({
        minify: true,
        /**
         * 需要注入 index.html ejs 模版的数据
         */
        inject: {
          data: {
            title: name
          }
        }
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(root, 'svgs')],
        // 指定symbolId格式
        symbolId: 'lm-[dir]-[name]'
      })
    ],//配置插件
    // ******开发服务器配置******
    server: {
      https: false, //(使用https)启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS
      port: port, //指定开发服务器端口：默认3000
      host: true, // 监听所有地址
      open: true, //启动时自动在浏览器中打开
      cors: false, //为开发服务器配置 CORS
      proxy: {
        //配置自定义代理规则
        // 字符串简写写法
        /* '/jpi': 'http://192.168.1.97:4567',
        '/api': {
          target: 'http://192.168.1.97:108',
          changeOrigin: true, //是否跨域
          rewrite: path => path.replace(/^\/api/, '')
        } */
      },
      hmr:true,
      //hmr: {
      // overlay: false, // 屏蔽服务器报错
      //},
    },
    //开发服务器配置
    // ******项目构建配置******
    //打包js,css和img资源分别分门别类在js/css/img文件夹中
    build: {
      //target: 'modules', //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
      //outDir: 'dist', // 构建得包名  默认：dist
      //assetsDir: 'assets', // 静态资源得存放路径文件名  assets
      //sourcemap: false, //构建后是否生成 source map 文件
      //brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
      //minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
      //chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
      //cssTarget: 'chrome61' //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
      terserOptions: {
        // 生产环境移除console
        compress: {
          drop_console: !isServe,
          drop_debugger: !isServe,
        },
        // 去掉注释内容
        output: {
          comments: !isServe, 
        },
      },
    },
    // ******resolver配置******
    resolve: {
      alias: {
        // 别名配置
        // 键必须以斜线开始和结束
        //'@': resolve(__dirname, 'src'),//定义路径别名为@
        // components: resolve(__dirname, './src/components'),
        //assets: resolve(__dirname, './src/assets'),
        //'#': resolve(__dirname, 'types'),
        // build: resolve(__dirname, 'build')
        //'@style': resolve('src/styles'),
        //'@utils': resolve('src/utils'),
        //'@api': resolve('src/api'),
        //'@view': resolve('src/views'),
        // "/images": "src/assets/images"//这里不能通过path模块解析路径的写法
      }
    },

    css: {
      // 全局变量+全局引入less+配置antdv主题色
      preprocessorOptions: {}
    },
  }
})
